<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHotRecommendAPI } from './request'
import type { SubTypeItem } from '@/types/hot'
// 获取页面参数
const query = defineProps<{
  type: 'string'
}>()
// tab高亮标识
const activeIndex = ref(0)
// 封面
const bannerPicture = ref('')
// 推荐选项 SubTypeItem[] & {finish:string} 合并类型
const subTypes = ref<SubTypeItem[] & { finish: string }>([])
// 热门推荐页 标题和url
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
]
const currentType = hotMap.find((item) => item.type == query.type)
// 设置导航栏标题
uni.setNavigationBarTitle({ title: currentType!.title })
const getHotRecommendFn = async () => {
  const res = await getHotRecommendAPI(currentType!.url, {
    page: 1,
    pageSize: 10,
  })
  bannerPicture.value = res.result.bannerPicture
  subTypes.value = res.result.subTypes
}
// 滚动条滚动到底部
const onScrolltolower = async () => {
  // 先获取到当前选项
  const currentSubTypes = subTypes.value[activeIndex.value]
  const res = await getHotRecommendAPI(currentType!.url, {
    subType: currentSubTypes.id,
    page: currentSubTypes.goodsItems.page,
    pageSize: currentSubTypes.goodsItems.pageSize,
  })
  if (currentSubTypes.goodsItems.page < currentSubTypes.goodsItems.pages) {
    currentSubTypes.goodsItems.page++
  } else {
    // 添加结束标识并提示没有更多数据
    currentSubTypes.finish = true
    return uni.showToast('没有更多数据了~')
  }
  const newSubTypes = res.result.subTypes[activeIndex.value]
  // 数组追加
  subTypes.value[activeIndex.value].goodsItems.items.push(...newSubTypes.goodsItems.items)
}
onLoad(() => {
  getHotRecommendFn()
})
</script>

<template>
  <!-- 推荐封面图 -->
  <view class="cover">
    <image mode="aspectFill" :src="bannerPicture"></image>
  </view>
  <!-- 推荐选项 -->
  <view class="tabs">
    <text
      class="text"
      v-for="(item, index) in subTypes"
      :key="item.id"
      :class="{ active: activeIndex == index }"
      @tap="activeIndex = index"
      >{{ item.title }}</text
    >
  </view>
  <!-- 有几个大选项就有几个子类列表 -->
  <scroll-view
    scroll-y
    v-for="(item, index) in subTypes"
    :key="item.id"
    v-show="activeIndex == index"
    @scrolltolower="onScrolltolower"
  >
    <view class="guess">
      <navigator
        class="guess-item"
        v-for="i in item.goodsItems.items"
        :key="i.id"
        :url="`/pages/goods/goods?id=${i.id}`"
      >
        <image class="image" mode="aspectFill" :src="i.picture"></image>
        <view class="name"> {{ i.name }} </view>
        <view class="price">
          <text class="small">¥</text>
          <text>{{ i.price }}</text>
        </view>
      </navigator>
    </view>
    <view class="loading-text"> {{ item.finish ? '没有更多数据了~' : '正在加载...' }} </view>
  </scroll-view>

  <!-- <view class="loading-text">正在加载...</view> -->
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
  overflow: hidden;
}
/* 分类标题 */
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  top: -40rpx;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
/* 猜你喜欢 */
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }
  .small {
    font-size: 80%;
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
